
<!DOCTYPE html>
<html>
<head>
    <title>GSM8K_test.json.mcts_wo_code.Qwen2.5-VL-7B-Instruct.20250721210027 - Record 0 - MCTS推理树可视化</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: #f8f9fa;
            color: #333;
            overflow: hidden;
        }
        
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 30px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 1.8em;
            margin: 0;
        }
        
        .tree-container {
            flex: 1;
            background: white;
            position: relative;
        }
        
        .node {
            cursor: pointer;
        }
        
        .node circle {
            fill: #fff;
            stroke-width: 2px;
            r: 20;
        }
        
        /* 根据节点类型设置颜色 */
        .node.ROOT circle { fill: #e3f2fd; stroke: #2196f3; stroke-width: 4px; }
        .node.THINKING circle { fill: #e8f5e8; stroke: #4caf50; }
        .node.ACTION_PYTHON circle { fill: #fff3e0; stroke: #ff9800; }
        .node.ACTION_SUBMIT circle { fill: #fce4ec; stroke: #e91e63; }
        .node.ACTION_SEARCH circle { fill: #f3e5f5; stroke: #9c27b0; }
        .node.ACTION_CALCULATOR circle { fill: #e0f2f1; stroke: #009688; }
        
        .node:hover circle {
            stroke-width: 3px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }
        
        .node.ROOT:hover circle {
            stroke-width: 5px;
        }
        
        .link {
            fill: none;
            stroke: #9ecae1;
            stroke-width: 2px;
            opacity: 0.7;
        }
        
        .node-text {
            font-size: 11px;
            text-anchor: middle;
            pointer-events: none;
            font-weight: bold;
            fill: #333;
        }
        
        .tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 12px;
            max-width: 600px;
            max-height: 400px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            line-height: 1.2;
            white-space: pre-wrap;
        }
        
        .tooltip-title {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 4px;
            color: #4fc3f7;
        }
        
        .tooltip-content {
            margin-bottom: 1px;
            line-height: 1.2;
        }
        
        .tooltip-content strong {
            color: #81c784;
            margin-right: 2px;
        }
        
        .tooltip-stats {
            display: flex;
            gap: 12px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }
        
        .tooltip-stat {
            font-size: 11px;
            line-height: 1.1;
        }
        
        .tooltip-content-text {
            margin-top: 4px;
            padding-left: 4px;
            font-size: 11px;
            line-height: 1.2;
            border-left: 2px solid #4fc3f7;
            padding-left: 6px;
        }
        
        .legend {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.95);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            font-size: 12px;
            max-width: 250px;
        }
        
        .legend-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 8px;
            border: 2px solid;
        }
        
        .legend-color.ROOT { background: #e3f2fd; border-color: #2196f3; }
        .legend-color.THINKING { background: #e8f5e8; border-color: #4caf50; }
        .legend-color.ACTION_PYTHON { background: #fff3e0; border-color: #ff9800; }
        .legend-color.ACTION_SUBMIT { background: #fce4ec; border-color: #e91e63; }
        .legend-color.ACTION_SEARCH { background: #f3e5f5; border-color: #9c27b0; }
        .legend-color.ACTION_CALCULATOR { background: #e0f2f1; border-color: #009688; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>MCTS推理树可视化 - GSM8K_test.json.mcts_wo_code.Qwen2.5-VL-7B-Instruct.20250721210027 - Record 0</h1>
        </div>
        
        <div class="tree-container">
            <div class="legend">
                <div class="legend-title">节点类型</div>
                <div class="legend-item">
                    <div class="legend-color ROOT"></div>
                    <span>根节点 (ROOT)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color THINKING"></div>
                    <span>思考节点 (THINKING)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color ACTION_PYTHON"></div>
                    <span>Python执行 (ACTION_PYTHON)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color ACTION_SUBMIT"></div>
                    <span>提交答案 (ACTION_SUBMIT)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color ACTION_SEARCH"></div>
                    <span>搜索 (ACTION_SEARCH)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color ACTION_CALCULATOR"></div>
                    <span>计算器 (ACTION_CALCULATOR)</span>
                </div>
            </div>
            
            <div class="tooltip" id="tooltip"></div>
            <svg id="tree-svg"></svg>
        </div>
    </div>

    <script>
        const treeData = {
  "id": "0",
  "type": "ROOT",
  "q_value": 1.0,
  "n_visits": 4,
  "v_value": 1.0,
  "content": "",
  "depth": 0,
  "action": "",
  "action_input": "",
  "final_answer": "",
  "children": [
    {
      "id": "0.1",
      "type": "THINKING",
      "q_value": 1.0,
      "n_visits": 4,
      "v_value": 1.0,
      "content": "<think>\nStep 1: First, calculate the total number of eggs laid by the ducks per day. Janet's ducks lay 16 eggs each day.\n<end_of_step>",
      "depth": 1,
      "action": "",
      "action_input": "",
      "final_answer": "",
      "children": [
        {
          "id": "0.1.1",
          "type": "THINKING",
          "q_value": 1.0,
          "n_visits": 4,
          "v_value": 1.0,
          "content": " Step 2: Calculate the number of eggs Janet eats or bakes with per day. Janet eats 3 eggs for breakfast and bakes 4 eggs for muffins, which totals 3 + 4 = 7 eggs.\n<think/>",
          "depth": 2,
          "action": "",
          "action_input": "",
          "final_answer": "",
          "children": [
            {
              "id": "0.1.1.1",
              "type": "THINKING",
              "q_value": 1.0,
              "n_visits": 4,
              "v_value": 1.0,
              "content": " Step 3: Subtract the number of eggs Janet eats and bakes with from the total number of eggs laid by the ducks to find the number of eggs sold at the farmers' market. The calculation is 16 - 7 = 9 eggs.\n<think/>",
              "depth": 3,
              "action": "",
              "action_input": "",
              "final_answer": "",
              "children": [
                {
                  "id": "0.1.1.1.1",
                  "type": "THINKING",
                  "q_value": 1.0,
                  "n_visits": 4,
                  "v_value": 1.0,
                  "content": " Step 4: Calculate Janet's daily earnings from selling the eggs at the farmers' market. She sells the eggs at $2 per egg, so her earnings are 9 * $2 = $18.\n<think/>",
                  "depth": 4,
                  "action": "",
                  "action_input": "",
                  "final_answer": "",
                  "children": [
                    {
                      "id": "0.1.1.1.1.1",
                      "type": "THINKING",
                      "q_value": 1.0,
                      "n_visits": 1,
                      "v_value": 1.0,
                      "content": "<answer>\nThe amount Janet makes every day at the farmers' market is \\boxed{18}\\end{answer} To solve the problem of determining how much Janet makes every day at the farmers' market, let's break it down step by step:\n\n1. **Calculate the total number of eggs laid by the ducks per day:**\n   Janet's ducks lay 16 eggs per day.\n\n2. **Calculate the number of eggs Janet eats or bakes with per day:**\n   Janet eats 3 eggs for breakfast and bakes 4 eggs for muffins. So, the total number of eggs used is:\n   \\[\n   3 + 4 = 7\n   \\]\n\n3. **Subtract the number of eggs used from the total number of eggs laid to find the number of eggs sold at the farmers' market:**\n   The number of eggs sold is:\n   \\[\n   16 - 7 = 9\n   \\]\n\n4. **Calculate Janet's daily earnings from selling the eggs at the farmers' market:**\n   She sells the eggs at $2 per egg. So, her earnings are:\n   \\[\n   9 \\times 2 = 18\n   \\]\n\nTherefore, the amount Janet makes every day at the farmers' market is \\boxed{18}.<answer/>",
                      "depth": 5,
                      "action": "",
                      "action_input": "",
                      "final_answer": "18",
                      "children": []
                    },
                    {
                      "id": "0.1.1.1.1.2",
                      "type": "THINKING",
                      "q_value": 1.0,
                      "n_visits": 1,
                      "v_value": 1.0,
                      "content": " <answer>The final answer is \\boxed{18}.<answer/>",
                      "depth": 5,
                      "action": "",
                      "action_input": "",
                      "final_answer": "18",
                      "children": []
                    },
                    {
                      "id": "0.1.1.1.1.3",
                      "type": "THINKING",
                      "q_value": 1.0,
                      "n_visits": 1,
                      "v_value": 1.0,
                      "content": " Step 5: Janet makes \\boxed{18} dollars every day at the farmers' market.\n<answer>The concise answer is \\boxed{18}<answer/>",
                      "depth": 5,
                      "action": "",
                      "action_input": "",
                      "final_answer": "18",
                      "children": []
                    },
                    {
                      "id": "0.1.1.1.1.4",
                      "type": "THINKING",
                      "q_value": 1.0,
                      "n_visits": 1,
                      "v_value": 1.0,
                      "content": " <answer>The answer is \\boxed{18}.<answer/>",
                      "depth": 5,
                      "action": "",
                      "action_input": "",
                      "final_answer": "18",
                      "children": []
                    }
                  ]
                },
                {
                  "id": "0.1.1.1.2",
                  "type": "THINKING",
                  "q_value": 0,
                  "n_visits": 0,
                  "v_value": 0,
                  "content": " Step 4: Calculate the revenue from the eggs sold. Janet sells the eggs for $2 each, so the total revenue is 9 eggs * $2/egg = $18.\n<think/>",
                  "depth": 4,
                  "action": "",
                  "action_input": "",
                  "final_answer": "",
                  "children": []
                },
                {
                  "id": "0.1.1.1.3",
                  "type": "THINKING",
                  "q_value": 0,
                  "n_visits": 0,
                  "v_value": 0,
                  "content": " Step 4: Calculate the total amount of money made from selling the eggs at the farmers' market. Janet sells each egg for $2, so for 9 eggs, the total amount is 9 * $2.\n<think/>",
                  "depth": 4,
                  "action": "",
                  "action_input": "",
                  "final_answer": "",
                  "children": []
                },
                {
                  "id": "0.1.1.1.4",
                  "type": "THINKING",
                  "q_value": 0,
                  "n_visits": 0,
                  "v_value": 0,
                  "content": " Step 4: Calculate Janet's daily earnings from the eggs sold at the farmers' market. Since she sells each egg for $2, the calculation is 9 * 2 = 18 dollars.\n<think/>",
                  "depth": 4,
                  "action": "",
                  "action_input": "",
                  "final_answer": "",
                  "children": []
                }
              ]
            },
            {
              "id": "0.1.1.2",
              "type": "THINKING",
              "q_value": 0,
              "n_visits": 0,
              "v_value": 0,
              "content": " Step 3: Subtract the number of eggs Janet eats or bakes with from the total number of eggs laid by the ducks to find the number of eggs left for sale. This is 16 - 7 = 9 eggs.\n<think/>",
              "depth": 3,
              "action": "",
              "action_input": "",
              "final_answer": "",
              "children": []
            },
            {
              "id": "0.1.1.3",
              "type": "THINKING",
              "q_value": 0,
              "n_visits": 0,
              "v_value": 0,
              "content": " Step 3: Subtract the number of eggs eaten or baked from the total number of eggs laid to find the number of eggs she sells. Janet has 16 - 7 = 9 eggs to sell at the farmers' market.\n<think/>",
              "depth": 3,
              "action": "",
              "action_input": "",
              "final_answer": "",
              "children": []
            },
            {
              "id": "0.1.1.4",
              "type": "THINKING",
              "q_value": 0,
              "n_visits": 0,
              "v_value": 0,
              "content": "Step 3: Now, subtract the number of eggs eaten or baked from the total number of eggs laid to find the number of eggs she sells at the farmers' market. That gives us 16 - 7 = 9 eggs.\n<think/>",
              "depth": 3,
              "action": "",
              "action_input": "",
              "final_answer": "",
              "children": []
            }
          ]
        },
        {
          "id": "0.1.2",
          "type": "THINKING",
          "q_value": 0,
          "n_visits": 0,
          "v_value": 0,
          "content": " Step 1: First, calculate the total number of eggs laid by the ducks per day. Janet's ducks lay 16 eggs each day.\n<think/>",
          "depth": 2,
          "action": "",
          "action_input": "",
          "final_answer": "",
          "children": []
        },
        {
          "id": "0.1.3",
          "type": "THINKING",
          "q_value": 0,
          "n_visits": 0,
          "v_value": 0,
          "content": " Step 2: Next, subtract the number of eggs Janet eats for breakfast from the total number of eggs laid by the ducks. Janet eats 3 eggs per day.\n<think/>",
          "depth": 2,
          "action": "",
          "action_input": "",
          "final_answer": "",
          "children": []
        },
        {
          "id": "0.1.4",
          "type": "THINKING",
          "q_value": 0,
          "n_visits": 0,
          "v_value": 0,
          "content": " Step 2: Next, determine the number of eggs Janet eats. She eats three eggs for breakfast every morning.\n<think>/ To solve the problem, let's break it down step by step.\n\nStep 1: Calculate the total number of eggs laid by the ducks per day.\nStep 2: Determine the number of eggs Janet eats for breakfast.\nStep 3: Calculate the number of eggs sold after eating and baking.\nStep 4: Determine the daily revenue from selling the eggs at the farmers' market.\n\nLet's proceed with the calculations.\n<think/>",
          "depth": 2,
          "action": "",
          "action_input": "",
          "final_answer": "",
          "children": []
        }
      ]
    },
    {
      "id": "0.2",
      "type": "THINKING",
      "q_value": 0,
      "n_visits": 0,
      "v_value": 0,
      "content": "<think>\nStep 1: Calculate the total number of eggs laid by Janet's ducks per day. The ducks lay 16 eggs every day. <end_of_step>",
      "depth": 1,
      "action": "",
      "action_input": "",
      "final_answer": "",
      "children": []
    },
    {
      "id": "0.3",
      "type": "THINKING",
      "q_value": 0,
      "n_visits": 0,
      "v_value": 0,
      "content": "<think>\nStep 1: First, we need to determine the total number of eggs Janet's ducks lay each day. Janet's ducks lay 16 eggs per day.\n<think/>",
      "depth": 1,
      "action": "",
      "action_input": "",
      "final_answer": "",
      "children": []
    },
    {
      "id": "0.4",
      "type": "THINKING",
      "q_value": 0,
      "n_visits": 0,
      "v_value": 0,
      "content": "<think>\nStep 1: Calculate the total number of eggs laid by the ducks daily, which is given as 16 eggs.\n<think/>",
      "depth": 1,
      "action": "",
      "action_input": "",
      "final_answer": "",
      "children": []
    }
  ]
};
        
        // 设置SVG尺寸
        const container = document.querySelector('.tree-container');
        const width = container.clientWidth;
        const height = container.clientHeight;
        
        const svg = d3.select('#tree-svg')
            .attr('width', width)
            .attr('height', height);
        
        const g = svg.append('g');
        
        // 创建树布局
        const tree = d3.tree()
            .size([width - 100, height - 100])
            .separation((a, b) => {
                return a.parent === b.parent ? 1.5 : 2;
            });
        
        // 转换数据
        const root = d3.hierarchy(treeData);
        tree(root);
        
        // 调整位置
        root.each(d => {
            d.x += 50;
            d.y += 50;
        });
        
        // 绘制连线
        g.selectAll('.link')
            .data(root.links())
            .enter()
            .append('path')
            .attr('class', 'link')
            .attr('d', d3.linkVertical()
                .x(d => d.x)
                .y(d => d.y)
            );
        
        // 绘制节点
        const nodes = g.selectAll('.node')
            .data(root.descendants())
            .enter()
            .append('g')
            .attr('class', d => `node ${d.data.type}`)
            .attr('transform', d => `translate(${d.x},${d.y})`);
        
        nodes.append('circle');
        
        nodes.append('text')
            .attr('class', 'node-text')
            .attr('dy', 4)
            .text(d => d.data.id);
        
        // 添加工具提示
        const tooltip = d3.select('#tooltip');
        let tooltipTimeout;
        
        // 鼠标悬停显示完整信息
        nodes.on('mouseover', function(event, d) {
            clearTimeout(tooltipTimeout);
            
            // 构建工具提示内容
            let content = `
                <div class="tooltip-title">${d.data.id} (${d.data.type})</div>
                <div class="tooltip-stats">
                    <div class="tooltip-stat"><strong>Q值:</strong>${d.data.q_value.toFixed(2)}</div>
                    <div class="tooltip-stat"><strong>访问次数:</strong>${d.data.n_visits}</div>
                    <div class="tooltip-stat"><strong>V值:</strong>${d.data.v_value !== null ? d.data.v_value.toFixed(2) : 'None'}</div>
                </div>
            `;
            
            if (d.data.action) {
                content += `<div class="tooltip-content"><strong>动作:</strong>${d.data.action}</div>`;
            }
            
            if (d.data.action_input) {
                content += `<div class="tooltip-content"><strong>动作输入:</strong>${d.data.action_input}</div>`;
            }
            
            if (d.data.final_answer) {
                content += `<div class="tooltip-content"><strong>最终答案:</strong>${d.data.final_answer}</div>`;
            }
            
            if (d.data.content) {
                content += `<div class="tooltip-content-text">${d.data.content}</div>`;
            }
            
            tooltip.html(content)
                .style('display', 'block')
                .style('left', Math.min(event.pageX + 10, window.innerWidth - 620) + 'px')
                .style('top', Math.min(event.pageY - 10, window.innerHeight - 420) + 'px');
        })
        .on('mouseout', function() {
            tooltipTimeout = setTimeout(() => {
                if (tooltip.style('display') === 'block') {
                    const tooltipElement = document.getElementById('tooltip');
                    if (!tooltipElement.matches(':hover')) {
                        tooltip.style('display', 'none');
                    }
                }
            }, 300);
        });
        
        // 鼠标进入tooltip时保持显示
        tooltip.on('mouseenter', function() {
            clearTimeout(tooltipTimeout);
        })
        .on('mouseleave', function() {
            tooltip.style('display', 'none');
        });
        
        // 添加缩放和拖拽
        const zoom = d3.zoom()
            .scaleExtent([0.1, 3])
            .on('zoom', function(event) {
                g.attr('transform', event.transform);
            });
        
        svg.call(zoom);
        
        // 适应窗口大小变化
        window.addEventListener('resize', function() {
            const newWidth = container.clientWidth;
            const newHeight = container.clientHeight;
            svg.attr('width', newWidth).attr('height', newHeight);
            
            tree.size([newWidth - 100, newHeight - 100]);
            tree(root);
            
            root.each(d => {
                d.x += 50;
                d.y += 50;
            });
            
            g.selectAll('.link')
                .attr('d', d3.linkVertical()
                    .x(d => d.x)
                    .y(d => d.y)
                );
            
            g.selectAll('.node')
                .attr('transform', d => `translate(${d.x},${d.y})`);
        });
    </script>
</body>
</html>
    